import React, { useEffect, useState } from "react";
import request, { baseUrl } from "../../utils/request";
import { useParams } from "react-router-dom";
import { Row, Col, Image, Layout, Tag, Space, Button } from 'antd'
import { HeartTwoTone, VerticalAlignBottomOutlined } from '@ant-design/icons';
import { useSearchParams } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { connect } from 'react-redux'
const { Header, Footer, Sider, Content } = Layout;
function Title({ user }) {
    const navigate = useNavigate()
    const [params, setParams] = useSearchParams()
    const [detaildata, setDetaildate] = useState([])
    const movieID = params.get('movieID')
    // console.log(movieID);
    const id = user.userInfo.id
    // console.log(user);

    // console.log(props);
    useEffect(() => {
        request({
            url: '/list/detail',
            params: { movieID, }
        }).then(res => {
            console.log(res.data.data);
            setDetaildate(res.data.data[0])
        })
    }, [])
    const addCollection = () => {
        // console.log(movieID);
        request({
            url: '/user/favs',
            method: 'post',
            data: {
                id,
                fav: movieID
            }
        })
    }
    return (
        <div>
            <Layout style={{
                borderRadius: '18px',
                boxShadow: ' 0 7px 21px rgb(149 157 165 / 22%)',
                background: ' #fff',
                width: '80vw',
                margin: 'auto',
                padding: '20px',
                height: '350px'
            }}>
                <Content>
                    <Row >
                        <Col >
                            <h1><span style={{ fontWeight: '700' }}>{detaildata.title}</span></h1>
                        </Col>

                    </Row>
                    <Row>
                        <Col push={0} >
                            <Tag style={{ borderRadius: '50px' }} color="orange">{detaildata.videoClass}</Tag>
                            <Tag style={{ borderRadius: '50px' }} color="geekblue">{detaildata.startTime}</Tag>
                            <Tag style={{ borderRadius: '50px' }} color="geekblue">{detaildata.address}</Tag>
                        </Col>
                    </Row>
                    <Row style={{ marginTop: '20px' }}>
                        <Col >
                            导演：
                        </Col>
                        <Col>
                            {detaildata.director}
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            主演：
                        </Col>
                        <Col>
                            {detaildata.actors}
                        </Col>

                    </Row>
                    <Row>
                        <Col>
                            {detaildata.douban}
                        </Col>
                    </Row>
                    <Row>
                        <Col style={{
                            textAlign: 'left'
                        }}>
                            {detaildata.intro}
                        </Col>
                    </Row>

                    <Row>
                        <Col>
                            <Space>
                                <Button onClick={addCollection} style={{
                                    borderRadius: '50px',
                                    marginTop: '20px',
                                    backgroundColor: '#fc000c',
                                    color: '#fff',
                                    border: '1px solid #fc000c'
                                }} ><HeartTwoTone twoToneColor="#eb2f96" /> 收藏</Button>
                                <Button onClick={() => {
                                    window.open("https://zimuku.org/");
                                }} style={{
                                    borderRadius: '50px',
                                    marginTop: '20px',
                                    color: '#34a853',
                                    background: '#ecf9f0',
                                    border: '1px solid #34a853',
                                }
                                }> <VerticalAlignBottomOutlined />字幕</Button>
                            </Space>
                        </Col>
                    </Row>
                    {/* <Button>收藏</Button> */}
                </Content>

                <Sider style={{ background: ' #fff', }}>
                    <Col >
                        <Image style={{
                            borderRadius: '10px',
                            width: '200px',
                            height: '280px'

                        }} src={baseUrl + '/imgs/' + detaildata.imgNames} />
                    </Col>

                    <Button style={{
                        marginTop: '20px',
                        float: 'right',
                        margin: '20px -25px 0 0',
                        color: '#282828'

                        // position:' relative'
                    }} onClick={() => {
                        navigate('/course')
                        // console.log(11);
                    }}>如何下载？如何播放</Button>
                </Sider>


            </Layout>





        </div>
    )
}


const mapStateToProps = function (state) {
    console.log(state);
    return {
        user: state
    }
}

// 把修改redux的方法映射到props
const mapDispatchToProps = function (dispatch) {
    return {
    }
}
Title = connect(mapStateToProps, mapDispatchToProps)(Title)
export default Title